<template>
  <div class="filtrate-city">
    <el-select class="city-select" v-model="currentCityModel" size="small"
               @change="changeCity">
      <el-option
          v-for="item in cityListOption"
          :key="item.code"
          :label="item.name"
          :value="item.code"
          class="custom-select-option"
      />
    </el-select>
  </div>
</template>

<script setup>
import {defineProps, watch, ref, defineEmits} from "vue";

const props = defineProps({
  cityList: {
    type: Array,
    default: () => []
  },
  currentCity: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['changeCity'])

const currentCityModel = ref('')
const cityListOption = ref([])

watch(
    () => props?.currentCity,
    (newVal) => {
      currentCityModel.value = newVal
    },
    { immediate: true }
)

watch(
    () => props?.cityList,
    (newVal) => {
      const tempList = [...newVal]
      cityListOption.value = tempList
    },
    { immediate: true }
)

const changeCity = (res) => {
  emit('changeCity', res)
}
</script>

<style scoped lang="less">
.filtrate-city {
  /deep/ .el-select__wrapper {
    background: #204485;
    .el-select__selected-item {
      color: white;
    }
  }
}
/deep/ .el-select__wrapper {
  background: #204485;
  box-shadow: inset 0px 0px 8px 0px #3D7FFF;
  border: 1px solid #67BAEF;
  .el-select__selected-item {
    color: white;
  }
}
/deep/ .el-select__wrapper.is-hovering {
  box-shadow: inset 0px 0px 8px 0px #3D7FFF;
  border: 1px solid #67BAEF;
}
.custom-select-option{
  color:#ffffff;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option:hover{
  background:#368CF2;
}
</style>